<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sDUdoQPdDgkLyTjMqULHNRVkjqN5yPTf"></script>
    <!--<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=F0Y0sjLbIOWdaaX0jtErS4eMwx0sv9zR"></script>-->
    <title>地图</title>
    <script src="JS/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>

    <div id="allmap">

    </div>

    <!--<div id="table11" style=" display: none">-->
        <!--<h1 style="text-align: center;margin-bottom: 30px">日常巡查信息表</h1>-->

        <!--<div style="margin: auto" class="layui-container">-->
            <!--<table class="layui-hide" id="test" lay-filter="test"></table>-->
        <!--</div>-->
    <!--</div>-->

    <!--<div style="margin: 20px 20% ; display: none" id="formDemo">-->
        <!--<form id="employeeAdd" class="layui-form">-->
            <!--<div class="layui-form-item">-->
                <!--<label>损害类型名称</label>-->
                <!--<input type="text" style="width: 300px" name="damage_type_fname" lay-verify="required" lay-reqtext="损害类型名称不能为空" placeholder="损害类型名称" autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div style="margin-left: 80px" class="layui-form-item">-->
                <!--<div>-->
                    <!--<button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add">添加</button>-->
                    <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                <!--</div>-->
            <!--</div>-->
        <!--</form>-->
    <!--</div>-->
</body>
</html>
<script type="text/javascript">
    layui.use(['table','jquery','layer','form'],function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        // GL版命名空间为BMapGL
        // 按住鼠标右键，修改倾斜角和角度

        table.render({
            elem: '#test'
            , url: 'http://localhost:8080/pavementFaltness/findByPage'
            , cellMinWidth: 80
            , page: true
            , id: 'pavement_flatness_id'
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cols: [[
                { type: 'checkbox', fixed: 'left' }
                , { field: 'zizeng', title: '序列', fixed: 'left', templet: '#zizeng', align: 'center' }
                , { field: 'pavement_flatness_id', title: '路面平整度检测记录编号', hide: true, align: 'center' }
                , { field: 'employee_testing_name', edit: true, title: '检测人员', align: 'center' }
                , { field: 'road_basic_id', edit: true, title: '道路编号', totalRow: true, align: 'center' }
                , { field: 'road_basic_name2', edit: true, title: '道路名称', align: 'center' }
                , { field: 'pavement_flatness_IRI', edit: true, title: 'IRI', align: 'center' }
                , { field: 'pavement_flatness_date', edit: true, title: '检查日期', align: 'center' }
                , { field: 'pavement_flatness_remarks', edit: true, title: '备注', align: 'center' }
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    add();
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('待开放功能');
                    break;
            };
        });


        var map = new BMapGL.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(106.25912, 29.29008), 19);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
        map.addControl(navi3DCtrl);


        // var drv = new BMapGL.DrivingRoute(map, {
        //     onSearchComplete: function(res) {
        //         if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
        //             var plan = res.getPlan(0);
        //             var arrPois =[];
        //             for(var j=0;j<plan.getNumRoutes();j++){
        //                 var route = plan.getRoute(j);
        //                 arrPois= arrPois.concat(route.getPath());
        //             }
        //             map.addOverlay(new BMapGL.Polyline(arrPois, {strokeColor: '#red',strokeWeight:6,strokeOpacity: 0.8}));
        //             map.setViewport(arrPois);
        //         }
        //     }
        // });


        //var drv = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});

        $(function () {
            var obj = {
                url: "http://localhost:8080/map/findAll",
                type: "post",
                success: function (result) {
                    // var data=JSON.stringify(result[i]);
                    xian(result)
                }
                // error:function (e) {
                //     alert("请求失败"+e.toString())
                // }
            };
            $.ajax(obj);
        })

        function xian(r) {
            for (var i in r) {
                var drv = new BMapGL.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true}});
                //第一条线
                var start = new BMapGL.Point(r[i].start_j, r[i].start_w);
                var end = new BMapGL.Point(r[i].end_j, r[i].end_w);
                drv.search(start, end);

                var _p2 = new BMapGL.Point(r[i].start_j,r[i].start_w);
                var _m2 = new BMapGL.Marker(_p2);
                map.addOverlay(_m2);
                _m2.addEventListener("click",function () {
                    layer.open({
                        type: 1
                        ,area:['400px','400px']
                        ,title:'历史检查信息查看'
                        ,offset: 'auto'//具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                        ,id: 'layerDemo' //防止重复弹出
                        ,scrollbar: false // 父页面 滚动条 禁止
                        ,resize:false
                        ,btn: ['查看道路历史信息']
                    });
                })
               // _m2.setAnimation(BMAP_ANIMATION_BOUNCE);
            }
        }

        // var _p1 = new BMapGL.Point(106.261406,29.29154);
        // var _m1 = new BMapGL.Marker(_p1);
        // map.addOverlay(_m1);
        // _m1.setAnimation(BMAP_ANIMATION_BOUNCE);
        //
        // var _p2 = new BMapGL.Point(106.262821,29.289505);
        // var _m2 = new BMapGL.Marker(_p2);
        // _m2.setAnimation(BMAP_ANIMATION_BOUNCE);
        // map.addOverlay(_m2);
        //
        // var start=new BMapGL.Point(106.261406,29.29154);
        // var end=new BMapGL.Point(106.262821,29.289505);
        // drv.search(start, end);

        // map.addEventListener('click', function(e) {
        //     alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        //     var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
        //     alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
        // });
    });
</script>
